<template>
  <view class="medicine_root">
    <view class="filter_box">
      <view class="search_box">
        <u-search
          input-align="center"
          v-model="condition.keyword"
          placeholder="药品名称或适应症"
          :height="44"
          :clearabled="true"
          :showAction="true"
          color="#0D1F4F"
          placeholderColor="#9DA7C0"
          actionText="搜索"
          :searchIconSize="20"
          bgColor="#F8FAFE"
          :actionStyle="{ color: '#346BF8' }"
          @search="toSeach"
        ></u-search>
      </view>
      <view
        class="condition_box"
        v-show="isExpand"
      >
        <u-search
          input-align="center"
          v-model="condition.brand"
          placeholder="品牌"
          :height="44"
          :clearabled="true"
          :showAction="false"
          color="#0D1F4F"
          placeholderColor="#9DA7C0"
          margin="0 0 24rpx 0"
          :searchIconSize="20"
          bgColor="#F8FAFE"
          :actionStyle="{ color: '#346BF8' }"
          @search="toSeach"
        ></u-search>
        <u-search
          input-align="center"
          v-model="condition.model"
          placeholder="规格"
          :height="44"
          :clearabled="true"
          :showAction="false"
          margin="0 0 24rpx 0"
          color="#0D1F4F"
          placeholderColor="#9DA7C0"
          :searchIconSize="20"
          bgColor="#F8FAFE"
          :actionStyle="{ color: '#346BF8' }"
          @search="toSeach"
        ></u-search>
      </view>
      <view
        class="ic_more"
        @click="isExpand = !isExpand"
      >
        <view
          class="arrow_expand_ver"
          :class="{ is_expand: isExpand }"
        >{{ isExpand ? '收起' : '展开' }}
        </view>
      </view>
    </view>

    <view class="list_box">
      <view
        class="list_item"
        v-for="(item, index) in tableData"
        :key="index"
        @click="toItem(item)"
      >
        <view
          class="title_box"
          :class="{
            yellow: item.state == 0,
            green: item.state == 1,
            red: item.state == 2,
          }"
        >
          <view class="lable_title">
            {{ item.name }}
          </view>
          <view
            class="common_tag"
            :class="{
            tag_yellow: item.state == 0,
            tag_green: item.state == 1,
            tag_red: item.state == 2
          }"
          >
            {{ item.state | stateStr }}
          </view>
        </view>
        <view class="common_message_box">
          <view class="msg_item">
            <view class="left">
              品 牌：
            </view>
            <view class="right line2">
              {{ item.brand }}
            </view>
          </view>
          <view class="msg_item">
            <view class="left">
              规 格：
            </view>
            <view class="right line2">
              {{ item.model }}
            </view>
          </view>
          <view class="msg_item">
            <view class="left">
              批准文号：
            </view>
            <view class="right line2">
              {{ item.approval_number }}
            </view>
          </view>
          <view class="msg_item">
            <view class="left">
              适应症：
            </view>
            <view class="right line2">
              {{ item.symptoms_treatment }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="common_float_btn"
      @click="toEdit"
    >

    </view>
    <HomeBtn :current="0"></HomeBtn>
  </view>
</template>

<script>
import HomeBtn from '../../componet/homeBtn.vue';
import data from './data.js';
export default {
  components: { HomeBtn },
  mixins: [data],
  data() {
    return {
      visible: { show: false },
      isExpand: false,
      condition: {
        keyword: "酚",
        brand: undefined,
        model: undefined,
      },
      tableData: [],
    };
  },
  methods: {
    toSeach() {

    },
    toItem(item) {
      this.setIntent(item);
      uni.navigateTo({ url: "/pages/medicine/detail" });
    },
    toEdit() {
      uni.navigateTo({ url: "/pages/medicine/edit" });
    },
  },
  filters: {
    stateStr(state) {
      switch (state) {
        case 0:
          return "待审核";
        case 1:
          return "已审核";
        case 2:
          return "未通过";
      }
    },
  },
  mounted() {
    this.tableData.push(...this.dataList);
  },
  created() { },
};
</script>

<style
  lang="scss"
  scoped
>
.medicine_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 98rpx;
  box-sizing: border-box;

  .filter_box {
    background: white;
    flex-shrink: 0;

    .search_box {
      padding: 24rpx 40rpx;
    }

    .condition_box {
      padding: 0 40rpx;
    }

    .ic_more {
      display: flex;
      justify-content: center;
      align-items: center;

      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #9DA7C0;
      line-height: 40rpx;
      padding-bottom: 8rpx;
    }
  }

  .list_box {
    flex: 1;
    overflow: auto;
    padding: 24rpx 40rpx 1rpx;

    .list_item {
      background: #FFFFFF;
      margin-bottom: 24rpx;

      box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(61, 79, 124, 0.08);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border: 1rpx solid #D5D9E5;

      .title_box {
        display: flex;
        align-items: center;
        padding: 24rpx 40rpx;
        justify-content: space-between;
        border-radius: 24rpx 24rpx 0rpx 0rpx;

        &.yellow {
          background: linear-gradient(127deg, rgba(255, 179, 64, 0.1) 0%, rgba(255, 179, 64, 0.02) 100%);
        }

        &.green {
          background: linear-gradient(127deg, rgba(0, 199, 119, 0.1) 0%, rgba(0, 199, 119, 0.02) 100%);
        }

        &.red {
          background: linear-gradient(127deg, rgba(244, 42, 66, 0.1) 0%, rgba(244, 42, 66, 0.02) 100%);
        }

        .lable_title {
          font-weight: 600;
          font-size: 32rpx;
          color: #0D1F4F;
          line-height: 48rpx;
          text-align: left;
        }


      }
    }
  }
}
</style>